<template>
  <div class="content" ref="content">
    <div class="table-default" v-if="tableData && tableData.length != 0">
      <el-button type="primary" class="backBtn" @click="backHandler">返回</el-button>
      <!-- <div class="search-hidden" ref="searchbox"> -->
      <div class="" ref="searchbox">
        <div id="base" ref="base">
          <el-descriptions :column="3" border title="基本信息" ref="descriptionsRef" id="el-descriptions">
            <el-descriptions-item id="el-descriptions-item" label-class-name="labelClassNAme el-descriptions-item" class-name="contentClassName el-descriptions-item" label="暂收单号">{{
              tableData.ordernumber
            }}</el-descriptions-item>
            <el-descriptions-item id="el-descriptions-item" label-class-name="labelClassNAme" class-name="contentClassName" label="条码">{{ tableData.barcode }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="品号">{{ tableData.fmaterialid }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="3" border ref="descriptionsRef" id="el-descriptions" v-show="flag">
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="品名">{{ tableData.fmaterialname }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="规格">{{ tableData.fmaterialmodel }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="送货数量">{{ tableData.quantityreceived }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="送货单号">{{ tableData.supplierOrder }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="采购订单号">{{ tableData.fbillno }}</el-descriptions-item>
            <!-- <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="送货单">{{ tableData.bsupplierOrderarcode }}</el-descriptions-item> -->
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="单位">{{ tableData.funitid_name }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="来料数量">{{ tableData.quantityincoming }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="送检数量">{{ tableData.gitquantity }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="检验方式">{{ methodFormatter[tableData.method] }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="检验结果">{{tableData.inspectionresult}}</el-descriptions-item>
            <!-- <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="检验结果">
              <el-switch v-model="changeInspectionresult" active-text="合格" inactive-text="不合格" inline-prompt style="--el-switch-on-color: #13ce66"
            /></el-descriptions-item> -->

            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="检验人员">{{ tableData.inspector_user }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="电话号码">{{ tableData.phone }}</el-descriptions-item>
            <!-- <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="	审核人">{{ tableData.auditor_user }}</el-descriptions-item> -->
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="判定">
              <!-- {{ decisionFormatter[tableData.decision] }} -->
              <el-radio-group v-model="changeInspectionresult" class="ml-4">
                <el-radio label="0">拒收 </el-radio>
                <el-radio label="1">接收</el-radio>
                <el-radio label="2">让步接收</el-radio>
              </el-radio-group>
            </el-descriptions-item>
          </el-descriptions>
          <el-divider @click="hideClick" ref="hideRef" v-show="flag">
            <el-icon><ArrowUpBold /></el-icon>
          </el-divider>
        </div>
      </div>

      <!-- </div> -->

      <el-divider @click="getMore" ref="showRef" v-show="!flag">
        <el-icon><ArrowDownBold /></el-icon>
      </el-divider>

      <div id="details" ref="details">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="检验明细" name="details">
            <el-table :data="tableData.Inspectionlistcheck" class="mt-3" v-loading="loading" border>
              <el-table-column prop="inspectionnumber" label="检验方案单号" width="180" />
              <el-table-column prop="productname" label="检查产品名称" min-width="180" />
              <el-table-column prop="testitem" label="测试项目" width="120" />
              <el-table-column prop="testmethod" label="测试方法" width="150" />
              <el-table-column prop="teststandard" label="测试标准" min-width="150" />
              <el-table-column prop="teststandard" label="	测试合格标准" min-width="130" />
              <!-- <el-table-column prop="quantity" label="送货数量" min-width="130" /> -->
              <el-table-column prop="remarks" label="检查方案测试备注" min-width="150" />
              <el-table-column prop="remarks" label="测试备注" min-width="130" />
              <el-table-column prop="imgurl" label="测试问题图片" min-width="130" />
            </el-table>
            <Paginate />
          </el-tab-pane>
          <!-- <el-tab-pane label="内容明细" name="ContentDetails"> 
            内容明细
          </el-tab-pane> -->
        </el-tabs>
      </div>
      <!-- </el-scrollbar> -->
    </div>
    <div v-else>
      <el-empty :image-size="200" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
import { useRouter, useRoute } from 'vue-router'
import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
import http from '/admin/support/http'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()

const api = `purchasing/inspectionlist/${route.query.id}`

// {provisional_id:1}
const { data, query, search, reset, loading } = useGetList(api)
const { destroy, deleted } = useDestroy()
const { open, close, title, visible, id } = useOpen()

const tableData = computed(() => data.value?.data.data)

console.log(tableData)

const methodFormatter = ref({
  0: '抽检',
  1: '全检',
})
const inspectionresultFormatter = ref({
  1: '合格',
  2: '不合格',
})
// const inspectionresultFormatter = ref({
//   0: true,
//   1: false,
// })
const stateFormatter = ref({
  true: 0,
  false: 1,
})
const decisionFormatter = ref({
  0: '拒收',
  1: '接收',
  2: '让步接收',
})

const searchbox = ref(null)
const showRef = ref(null)
const flag = ref(false)

const getMore = () => {
  if (!flag.value) {
    searchbox.value.className = ''
    // showRef.value.style.display = "none"
    flag.value = true
  }
}
const hideClick = () => {
  if (flag.value) {
    searchbox.value.className = 'search-hidden'
    // showRef.value.style.display = "block"
    flag.value = false
  }
}

let inspectionresult = ref(null)
let changeInspectionresult = ref(null)
console.log('11111', changeInspectionresult.value)

let radio1 = ref('1')

// console.log(changeInspectionresult.value);

// let isFirst = ref(true)

watch(changeInspectionresult, (newVal, oldVal) => {
  // console.log('333',olgVal);

  if (oldVal == null) {
    // isFirst.value = !isFirst.value
    return
  } else {
    updateState(newVal)
  }
  // console.log('进入',newVal,oldVal)
})

// 修改合格状态
let updateState = newVal => {
  console.log('进来了')

  console.log('2222', changeInspectionresult.value)

  let data = {
    id: inspectionlistId.value,
    decision: newVal,
  }
  console.log(data)

  http.post(`purchasing/updateCheck`, data).then(res => {
    console.log('修改状态：', res.data)
    if (res.data.code == '10000') {
      ElMessage.success(res.data.message)
    } else {
      ElMessage.success(res.data.message)
      // changeInspectionresult.value = !changeInspectionresult.value
    }
  })
}

console.log('路由参数接收', route.query.id)

const inspectionlistId = ref(null)

const getTableData = () => {
  http.get(`purchasing/inspectionlist/${route.query.id}`).then(r => {
    let res = r.data.data.data
    console.log('请求数据列表：', res)
    console.log('0000', changeInspectionresult.value)
    changeInspectionresult.value = String(res.decision)
    console.log('请求接收状态', changeInspectionresult.value)
    inspectionlistId.value = res.inspectionlist_id
  })
}

getTableData()

const backHandler = () => {
  router.go(-1)
}
const isMore = ref<boolean>(false)

const activeName = ref('details')
const base = ref(null)
const details = ref(null)
const content = ref()

// let descriptionsRef = ref(null)
// console.log(descriptionsRef.value);

onMounted(() => {
  search()
  deleted(reset)
  const item = document.querySelectorAll('#el-descriptions-item')
  console.log(item)
  console.log(document)
  // console.log(document.#el-descriptions);

  const descriptions = document.querySelector('#el-descriptions')
  console.log(descriptions)

  // if (descriptionsRef.value) {
  //   const rows = descriptionsRef.value.querySelectorAll('.el-descriptions-item');
  //   rows.forEach((row) => {
  //     const height = row.offsetHeight;
  //     console.log('Row Height:', height);
  //   });
  // }
})
</script>

<style lang="css">
.table-default {
  padding: 0 20px;
}
.search-hidden {
  margin-top: 20px;
  /* border: 1px solid red; */
  height: 82px;
  overflow: hidden;
}

.backBtn {
  margin: 20px 0;
}

h2 {
  font-weight: bold;
}
#base {
  margin-bottom: 30px;
  /* border: 2px solid green; */
}
#details {
  /* border: 2px solid pink; */
}

.tabs {
  padding: 10px 0 0;
  /* border: 2px solid #000; */
  z-index: 999;
  background-color: #fff;
  position: sticky;
  top: -15px;
}

.tagRow {
  display: inline-block;
  /* border: 1px solid #000; */
  margin: 20px 10px;
}

.tagRow ul {
  display: flex;
  border: 1px solid #eee;
}
.tagRow ul li {
  margin: 0 5px;
  /* border: 1px solid #eee; */
  padding: 5px 10px;
  /* border-radius: 5px; */
}
.active {
  background-color: #409eff;
  color: #fff;
}
.labelClassNAme {
  width: 130px;
}
.contentClassName {
  width: 170px;
}
</style>
